import { Component, OnInit } from '@angular/core';

import { WarpperService } from '../../../shared/service/Warpper.service';
import { FunctionService } from '../../../shared/service/function.service';
import { UserService } from '../../../shared/service/user.service';


@Component({
  selector: 'app-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.scss']
})
export class AreaComponent implements OnInit {

  /*
  页面逻辑： 1、首次加载绘制 年间 数据
            2、选择了对应的年份后，绘制对应年份的 月份 数据
            3、选择对应月份后，绘制对应月份内的 天数 数据。
            4、选择对应天后，绘制对应的日常消费数据。
  */
  public loadCharts:Boolean = false;

  // 圆类型   doughnut 空心圆   pie 实心圆
  public doughnutChartType:string = 'doughnut';
  public pieChartType:string = 'pie';

  // 最终绘制的数据数组
  public areaChart:any = [];
  public areaChartData:number[] = [];
  public areaChartLabels:string[] = [];

  // Select data
  public selectData:any[] = [];

  public areaArray:any[] = [];
  public areaArrayMonth:any[] = [];
  public areaArrayDay:any[] = [];

  public dayOption:object = {};
  public monthOption:object = {};
  public yearsOption:object = {};

  public allClassArr:any[] = [];


  constructor(
    private warpperService: WarpperService,
    private functionService: FunctionService,
    private userService: UserService
  ) {
    this.selectData = [];
  }

  ngOnInit() {
    // 加载一次所有分类
    this.getClassAll();
  }

  // 加载一次所有分类
  getClassAll() {
    this.userService.getClassAll()
        .then((data) => {
          this.allClassArr = this.functionService.clearObjToArray(data)
        })
  }

  /*****
  *  绘制饼图
  *  @param  :  (参数)
  *  @return :  (返回值说明)
  *****/
  drawChart(arr) {
    // 关闭绘制
    this.loadCharts = false;
    // 清空原有数据
    this.areaChartLabels = [];
    this.areaChartData = [];
    setTimeout(() => {
      arr.forEach((item) => {
        // 区分出当日的事件绘制图表
        if (item.price) {
          // 设置圆 label
          this.areaChartLabels.push(item.content);
          // 设置圆 数据
          this.areaChartData.push(item.price);
        }else {
          // 设置圆 label
          this.areaChartLabels.push(item.name);
          // 设置圆 数据
          this.areaChartData.push(item.sum);
        }
      });
      // 绘制
      this.loadCharts = true;
    }, 100);
  }

  /*****
  *  绘制图表 
  *  @param  :  (参数)
  *  @return :  (返回值说明)
  *****/
  chartsAreaSubmit() {
    if (this._option) {
      // 请求年份的数据
      if (this._option[0] === '年份') {
        this.yearsEvent(this._option);
      }else {
        this.classEvent(this._option);
      }
    }
  }

  // 针对年份的 change 事件
  classEvent(option) {
    const param = this.classParam;
    switch (option.length) {
      case 1:
        this.userService.getClassDetailYears(param['id'])
            .then((data) => {
              // 缓存数组数据
              this.areaArray = this.functionService.clearObjToArray(data);
              this.areaChart = this.areaArray;
              this.drawChart(this.areaChart);
            });
      break;
      case 2:
          this.userService.getClassDetailMonth(param['id'], 'Y102400' + option[1])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayMonth = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayMonth;
                this.drawChart(this.areaChart);
              })
      break;
      case 3:
          this.userService.getClassDetailDay(param['id'], 'M102400' + option[1] + option[2])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayDay = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayDay;
                this.drawChart(this.areaChart);
              });
      break;
      case 4:
          this.userService.getClassDetailEvent(param['id'], 'D102400' + option[1] + option[2] + option[3])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayEvent = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayEvent;
                this.drawChart(this.areaChart);
              });
      break;
      default:
          this.userService.getClassDetailYears(param['id'])
              .then((data) => {
                // 缓存数组数据
                this.areaArray = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArray;
                this.drawChart(this.areaChart);
              });
      break;
    }
  }

  // 针对年份的 change 事件
  yearsEvent(option) {
    switch (option.length) {
      case 1:
        this.warpperService.getYearsData()
            .then((data) => {
              // 缓存数组数据
              this.areaArray = this.functionService.clearObjToArray(data);
              this.areaChart = this.areaArray;
              this.drawChart(this.areaChart);
            });
      break;
      case 2:
          this.warpperService.getMonthData('Y102400' + option[1])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayMonth = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayMonth;
                this.drawChart(this.areaChart);
              })
      break;
      case 3:
          this.warpperService.getDayData('M102400' + option[1] + option[2])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayDay = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayDay;
                this.drawChart(this.areaChart);
              });
      break;
      case 4:
          this.warpperService.getEventData('D102400' + option[1] + option[2] + option[3])
              .then((data) => {
                // 缓存数组数据
                this.areaArrayEvent = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArrayEvent;
                this.drawChart(this.areaChart);
              });
      break;
      default:
          this.warpperService.getYearsData()
              .then((data) => {
                // 缓存数组数据
                this.areaArray = this.functionService.clearObjToArray(data);
                this.areaChart = this.areaArray;
                this.drawChart(this.areaChart);
              });
      break;
    }
  }

  // events
  public chartClicked(e:any):void {
    // if(e.active.length){
    //   // 根据当前用户点击饼图的索引去数组中寻找对应的数据，重新抽取数据绘制图
    //   console.log(this.areaArray[e.active[0]._index]);
    // }
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  // 级联

  _value: any[] = null;

  _option: any[] = null;

  oneArr: any[] = [];

  areaArrayEvent: any[] = [];

  // 缓存当前对应的分类数据
  classParam: any;

  // 当前级联change方法
  _console(value) {

    this.classParam = this.allClassArr.find(item => item['name'] === value[0]);

    this._option = value;
  }

  /** load data async */
  loadData(e: {option: any, index: number, resolve: Function, reject: Function}): void {
    if (e.index === -1) {
      this.userService.getClassAll()
          .then((data) => {
            this.oneArr = this.functionService.clearObjToArray(data);
            // 多加一个年份
            this.oneArr.unshift({
              id: 'A101',
              name: '年份',
              value: '年份',
              label: '年份'
            });
            e.resolve(this.oneArr);
          });
      return;
    }

    const option = e.option;
    option.loading = true;

    if (e.index === 0) {
      if (option['name'] === '年份') {
        this.warpperService.getYearsData()
          .then((data) => {
            // 缓存数组数据
            this.areaArray = this.functionService.clearObjToArray(data);
            e.resolve(this.areaArray);
          });
      }else {
        this.userService.getClassDetailYears(e.option['id'])
          .then((data) => {
            // 缓存数组数据
            this.areaArray = this.functionService.clearObjToArray(data);
            e.resolve(this.areaArray);
          });
      }
      return;
    }

    if (e.index === 1) {
      if (this._option[0] === '年份') {
        this.warpperService.getMonthData(option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayMonth = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayMonth);
              // 关闭loading
              option.loading = false;
            });
      }else {
        this.userService.getClassDetailMonth(this.classParam['id'], option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayMonth = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayMonth);
              // 关闭loading
              option.loading = false;
            });
      }
    }

    if (e.index === 2) {
      if (this._option[0] === '年份') {
        this.warpperService.getDayData(option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayDay = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayDay);
              // 关闭loading
              option.loading = false;
            });
      }else {
        this.userService.getClassDetailDay(this.classParam['id'], option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayDay = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayDay);
              // 关闭loading
              option.loading = false;
            });
      }
    }

    if (e.index === 3) {
      if (this._option[0] === '年份') {
        this.warpperService.getEventData(option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayEvent = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayEvent);
              // 关闭loading
              option.loading = false;
            });
      }else {
        this.userService.getClassDetailEvent(this.classParam['id'], option.id)
            .then((data) => {
              // 缓存数组数据
              this.areaArrayEvent = this.functionService.clearObjToArray(data);
              e.resolve(this.areaArrayEvent);
              // 关闭loading
              option.loading = false;
            });
      }
    }

  }





}
